<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>结果页</title>
    <script src="js/vue.min.js"></script>
    <script src="js/vant.min.js"></script>
    <link rel="stylesheet" href="css/index.css"/>
</head>

<body>
<div id="app" v-cloak>
    <div class="content">
        <div class="layout">
            <!--标题-->
            <div class="title1">
                <van-image src="./img/topBacPIc.png" fit="cover"
                           style="width: 100%;"></van-image>

                <div class="titleContent">
                    结果页
                </div>
            </div>

            <!--main-->
            <div class="mainContent">
                <div class="old-card">
                    <van-empty
                            class="custom-image"
                            image="./img/confirm.png"
                            description="您已提交成功"
                    />
                </div>
                <div class="btnArea">
                    <van-button
                            class="btn_confirm"
                            color="linear-gradient(to right, #576692, #353E67)"
                            round
                            size="large"
                            @click="accomplish"
                    >确认
                    </van-button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {

            }
        },

        methods: {
            accomplish() {

            },
        },
    });
</script>

<style>
    [v-cloak] {
        display: none;
    }

    body {
        margin: 0px;
        padding: 0px;
    }

    .content {
        width: 100%;
        height: 100vh;
    }

    .layout {
        height: 100vh;
        min-height: 1350px;
        position: relative;
        background-color: #f9f9f9;
    }

    .title1 {
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .titleContent {
        position: absolute;
        width: 100%;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 21px;
        color: #fff;
        text-align: center;
    }

    .arrowLeft {
        position: absolute;
        top: 25%;
        left: 5%
    }

    .beforeContent {
        width: 100%;
        height: 80px;
        position: absolute;
        top: 210px;
        backdrop-filter: blur(10px);
    }

    .mainContent {
        position: absolute;
        width: 90%;
        left: 5%;
        top: 8%;
        color: #555;
        padding-bottom: 100px;
    }

    /*旧车处理方式*/
    .old-card {
        position: relative;
        border-radius: 9px;
        background-color: #FFFFFF;
        padding: 15px 15px;
        margin-bottom: 20px;
        /*height: 50vh;*/
    }

    .text-car {
        font-size: 16px;
        font-weight: 700;
        margin: 15px 0;
        padding-bottom: 9px;
        text-align: center;
        border-bottom: 2px solid #f8edca;
    }

    .bot-pag {

        font-size: 14px;
        text-align: justify;
        line-height: 25px;
    }

    .bot-pag a {
        color: #2562AA;
    }

    .bot-pag p {
        text-indent: 17.5px;
    }

    .bot-pag span {
        font-weight: 700;
    }

    .sm {
        border: 1px solid #ffe4c7;
        background-color: #fff9ef;
        color: #a28a6e;
        font-size: 25px;
        padding: 30px;
        border-radius: 15px;
        line-height: 36px;
        margin-top: 25px;
        margin-bottom: 10px;
        display: flex;
        text-align: justify;
    }

    .bottomBgImg {
        position: absolute;
        left: 0;
        bottom: 0;
    }

    /*选择后展示相应材料图片*/
    .bottomImages {
        background-color: #ecf2ff;
        border-radius: 0 0 18px 18px;
        margin: 0 auto;
        padding: 0px 15px 50px;
        margin-bottom: 30px;
        text-align: center;
    }

    .infoImgTitle {
        width: 50%;
        height: 6vh;
        margin: 0 auto 10px;
        background: url("~@/assets/images/netsign/jccl3.png") no-repeat;
        background-size: 100% auto;
        color: #FFFFFF;
        font-size: 26px;
        line-height: 4vh;
        text-align: center;
    }

    /*下一步*/
    .ydbut {
        width: 100%;
        border-radius: 35px;
        border: 1px solid rgb(146, 190, 251);
        color: #949494;
        font-size: 35px;
    }

    .nextBtn {
        width: 100%;
        background: linear-gradient(to right, #576692, #353E67);
        border-radius: 28px;
        border: none;
        font-size: 32px;
        color: #fbe8d7;
    }

    .foot {
        height: 9vh;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
    }

    .btnArea {
        padding: 10px 18px
    }

    .btn_confirm {
        border-radius: 15px;
        height: 46px;
    }

    .down {
        text-align: center;
        padding-bottom: 60px;
        padding-top: 28px;
        font-size: 24px;
        color: #a8a8a6;
        line-height: 40px;
    }

    .firstWord::before {
        content: "";
        display: block;
        width: 80vw;
        height: 2px;
        background: #ededec;
        position: absolute;
        left: 50%;
        margin-left: -40vw;
        top: 17px;

    }

    .firstWord span {
        padding: 0 10px;
        background: #f5f5f5;
        position: relative;
    }

    img {
        background-image: linear-gradient(to bottom, #FFFFFF, transparent) !important;
    }

    .startSign {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        position: absolute;
        border-radius: 15px;
        height: 46px;
    }

    .selectTimeOutBtn{
        border-radius: 10px;
    }

    .esign {
        position: relative;
    }

    .esignTitle {
        margin-left: 15px;
        font-size: 18px;
        line-height: 6vh;
        font-weight: bold;
    }

    .esignRewrite {
        color: #488ee9;
        position: absolute;
        right: 15px;
        top: 15px;
    }

    canvas {
        max-width: 100%;
        display: block;
    }

    .sign-container {
        width: 95%;
        height: 219px;
        background: rgba(51, 51, 51, 0.1);
        border-radius: 8px 8px 8px 8px;
        padding: 8px;
    }

    .c-img {
        width: 100%;
        height: 100%;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid rgba(51, 51, 51, 1);
        position: relative;
    }

    .c-img:before {
        content: "签名区域";
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 34px;
        font-size: 32px;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: rgba(51, 51, 51, 0.2);
        line-height: 34px;
        position: absolute;
    }

    .custom-image .van-empty__image {
        width: 140px;
        height: 140px;
    }

</style>

</body>
</html>


